<template>
  <div class="c-set">
    <el-form label-width="70" class="set-form" label-position="left">
      <el-form-item label="组件名称">
        <el-input v-model="chartConf.title" size="small"></el-input>
      </el-form-item>
      <el-form-item label="尺寸" class="large_label"></el-form-item>
      <setting-item-box>
        <setting-item name="宽度">
          <el-input-number
            v-model="attrConf.w"
            controls-position="right"
            size="small"
          ></el-input-number>
        </setting-item>
        <setting-item name="高度">
          <el-input-number
            v-model="attrConf.h"
            controls-position="right"
            size="small"
          ></el-input-number>
        </setting-item>
      </setting-item-box>

      <el-form-item label="对齐方式" class="large_label"></el-form-item>
      <div class="flex-item">
        <el-button
          v-for="item in positionList"
          :key="item.key"
          @click="positonHandle(item.key)"
          color="#D9D9D9"
        >
          <template #icon>
            <!-- <svg-icon :name="item.icon" /> -->
          </template>
        </el-button>
      </div>
      <div class="flex-item">
        <div class="left">
          <div class="text">左边距</div>
          <div class="number">
            <el-input-number
              v-model.number="attrConf.x"
              size="small"
              controls-position="right"
            ></el-input-number>
          </div>
        </div>
        <div class="right">
          <div class="text">顶部边距</div>
          <div class="number">
            <el-input-number
              v-model.number="attrConf.y"
              size="small"
              controls-position="right"
            ></el-input-number>
          </div>
        </div>
      </div>
      <div class="flex-item">
        <div class="left">
          <div class="text">右边距</div>
          <div class="number">
            <el-input-number
              v-model.number="attrConf.right"
              size="small"
              controls-position="right"
            ></el-input-number>
          </div>
        </div>
        <div class="right">
          <div class="text">底部边距</div>
          <div class="number">
            <el-input-number
              v-model.number="attrConf.bottom"
              size="small"
              controls-position="right"
            ></el-input-number>
          </div>
        </div>
      </div>
    </el-form>
    <component :is="chartConf.conKey" :option="selectComponent.option" />
  </div>
</template>

<script setup>
import store from "@/store";
import { computed, watch } from "vue";
import { SettingItem, SettingItemBox } from "@/components/ChartItemSetting";
let selectComponent = computed(() => {
  return store.state.chartEditStore.selectedComponent || {};
});
let attrConf = computed(() => {
  return store.state.chartEditStore.selectedComponent?.attr;
});
let chartConf = computed(() => {
  return store.state.chartEditStore.selectedComponent.chartConfig;
});
let canvasConfig = computed(() => {
  return store.state.chartEditStore.editCanvasConfig;
});
const positionList = [
  {
    key: "AlignHorizontalLeft",
    lable: "局左",
    icon: "AlignHorizontalLeft",
  },
  {
    key: "AlignVerticalCenter",
    lable: "X轴居中",
    icon: "AlignVerticalCenter",
  },
  {
    key: "AlignHorizontalRight",
    lable: "局右",
    icon: "AlignHorizontalRight",
  },
  {
    key: "AlignVerticalTop",
    lable: "顶部",
    icon: "AlignVerticalTop",
  },
  {
    key: "AlignHorizontalCenter",
    lable: "Y轴居中",
    icon: "AlignHorizontalCenter",
  },
  {
    key: "AlignVerticalBottom",
    lable: "底部",
    icon: "AlignVerticalBottom",
  },
];
const positonHandle = (key) => {
  switch (key) {
    // 局左
    case positionList[0]["key"]:
      attrConf.value.x = 0;
      break;
    // X轴居中
    case positionList[1]["key"]:
      attrConf.value.y = (canvasConfig.value.height - attrConf.value.h) / 2;
      break;
    // 局右
    case positionList[2]["key"]:
      attrConf.value.x = canvasConfig.value.width - attrConf.value.w;
      break;
    // 顶部
    case positionList[3]["key"]:
      attrConf.value.y = 0;
      break;
    // Y轴居中
    case positionList[4]["key"]:
      attrConf.value.x = (canvasConfig.value.width - attrConf.value.w) / 2;
      break;
    // 底部
    case positionList[5]["key"]:
      attrConf.value.y = canvasConfig.value.height - attrConf.value.h;
      break;
  }
  attrConf.value.right =
    canvasConfig.value.width - attrConf.value.w - attrConf.value.x;
  attrConf.value.bottom =
    canvasConfig.value.height - attrConf.value.h - attrConf.value.y;
};
watch(
  () => attrConf.value,
  (val) => {
    if (val?.right) {
      attrConf.value.x =
        canvasConfig.value.width - attrConf.value.w - val?.right;
    }
  }
);
watch(
  () => attrConf.value,
  (val) => {
    if (val?.bottom) {
      attrConf.value.y =
        canvasConfig.value.height - attrConf.value.h - val?.bottom;
    }
  }
);
</script>
<style scoped lang="scss">
.c-set {
  height: 100%;
  padding: 5px;
  // color: var(--el-text-color-regular);
  // overflow: auto;
  .set-form {
    ::v-deep(.el-form-item) {
      margin-bottom: 10px;
    }
    ::v-deep(.el-form-item__label) {
      font-size: 12px;
    }
    .el-input {
      width: 90%;
    }
    .flex-item {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 18px;
      :deep(.el-button) {
        width: 5px;
        height: 25px;
        padding: 5px 12px;
      }
      .left,
      .right {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        font-size: 13px;
        .number {
          :deep(.el-input-number) {
            width: 70px;
            .el-input__wrapper {
              padding: 0 20px 0 0;
            }
          }
        }
      }
    }
    .large_label {
      :deep(.el-form-item__label) {
        font-size: 14px !important;
        font-weight: bold;
      }
    }
  }
}
</style>
